<template>
	<detailbox :title="type == 1 ? '重新编辑' : '新增'" @leftclick="close">
		<div slot="right" class="flex_item flex_between">
			<div v-if="type == 1" class="error error_f f12 ml10">
				<i class="f14 el-icon-error"></i>
				审核未通过:
				<span class="ml30">
					{{ checkItem.type == 1 ? '审核人:' : checkItem.type == 3 ? '记录责任人:' : checkItem.type == 4 ? '批准人:' : '' }} {{ checkItem.createUserName }}
				</span>
				<span class="ml30">未通过原因: {{ checkItem.content }}</span>
			</div>
			<div v-else></div>
			<div>
				<el-button type="success" size="small" @click="addFile" v-if="type == 0">添加新增</el-button>
				<el-button v-if="type == 1" type="primary" size="small" plain @click="openDialg('showhistory')">审批历史详情</el-button>
				<el-button type="primary" size="small" @click="submit">提交</el-button>
			</div>
		</div>
		<el-row>
			<el-col :span="18">
				<div style="margin-top:10px;" v-for="(form, index) in formList" :key="index" :id="'item' + index">
					<basic-container>
						<div class="main_title success_f flex_between">
							<b>
								管理信息
								<span v-if="formList.length > 1">({{ index + 1 }})</span>
							</b>
							<el-button type="danger" size="small" plain v-if="index != 0" @click="delFile(index)">删除</el-button>
						</div>
						<el-divider></el-divider>
						<div class="mb20">
							<span class="index_num success_bg">1</span>
							<b class="f14">基础信息</b>
						</div>
						<div>
							<el-form size="small" inline>
								<el-row>
									<el-col :span="24">
										<el-form-item label="文件作废管理编号:" required>
											<el-input v-model="form.number" placeholder="数据带入" class="w160 ml10" readonly v-if="form.numberType == 0"></el-input>
											<el-input class="ml10 w160" placeholder="请输入" v-model="form.number" v-if="form.numberType == 1"></el-input>
											<el-popover placement="top-start" title="编号规则:" width="220" trigger="hover">
												<div>
													<p>WJZF--------文件作废</p>
													<p>xxxx---------年月日(编辑日期，8位)</p>
													<p>xx---------流水号,从01开始</p>
												</div>
												<i slot="reference" class="el-icon-question f18 gray_f ml10"></i>
											</el-popover>
										</el-form-item>
									</el-col>
								</el-row>
								<div class="f14 mb20">
									作废文件
									<el-button size="mini" class="el-icon-circle-plus-outline ml10" type="primary" plain @click="addItem(form)">增加</el-button>
								</div>
								<div class="reviewCon mb20" v-for="(item, i) in form.voidList" :key="i">
									<el-row class="reviewList flex_wrap flex_row">
										<el-col :span="8">
											<el-form-item label="作废文件名称:" required>
												<el-select v-model="item.filesId" class="w160" filterable placeholder="请输入/搜索/选择" @change="changeFileName($event, item)">
													<el-option v-for="v in filNameList" :key="v.id" :label="v.name" :value="v.id"></el-option>
												</el-select>
											</el-form-item>
										</el-col>
										<el-col :span="8">
											<el-form-item label="作废文件编号:" required>
												<el-input class="w160" readonly placeholder="自动带出" v-model="item.fileNumber"></el-input>
											</el-form-item>
										</el-col>
										<el-col :span="8">
											<el-form-item label="作废文件版本号:" required>
												<el-select class="w160" filterable placeholder="请输入/搜索/选择" v-model="item.versionNumber">
													<el-option v-for="v in item.versonList" :key="v.id" :value="v.versionNumber" :label="v.versionNumber"></el-option>
												</el-select>
											</el-form-item>
										</el-col>
										<el-col :span="8">
											<el-form-item label="作废数量:" required>
												<el-input placeholder="请输入" v-model="item.qty" class="w140"><span slot="suffix">份</span></el-input>
											</el-form-item>
										</el-col>
										<el-col :span="8">
											<el-form-item label="作废日期:" required>
												<el-date-picker class="w160" v-model="item.voidDate" value-format="yyyy-MM-dd" type="date" placeholder="选择日期"></el-date-picker>
											</el-form-item>
										</el-col>
										<el-col :span="8">
											<el-form-item label="作废文件处理:" required>
												<el-select v-model="item.dealType" class="w160">
													<el-option label="原件作废保留" :value="0"></el-option>
													<el-option label="原件作废销毁" :value="1"></el-option>
												</el-select>
											</el-form-item>
										</el-col>
										<el-col :span="8" v-if="item.dealType == 0">
											<el-form-item class="m0" label="原件作废保留期限:" required>
												<el-input class="w160" v-model="item.voidRetentionPeriod" placeholder="请输入" oninput="value=value.replace(/[^\d]/g,'')">
													<span slot="suffix">年</span>
												</el-input>
											</el-form-item>
										</el-col>
										<el-col :span="8">
											<el-form-item class="m0" label="申请部门:" required>
												<el-cascader
													class="w160"
													placeholder="请选择"
													:ref="'newdept' + (index + i)"
													:options="deptOption"
													v-model="item.applyDeptId"
													:show-all-levels="false"
													:props="{
														value: 'id',
														label: 'deptName',
														emitPath: false,
														checkStrictly: true
													}"
													filterable
													@change="getMemberOption($event, item, index, i)"
												></el-cascader>
											</el-form-item>
										</el-col>
										<el-col :span="8">
											<el-form-item class="m0" label="申请人:" required>
												<el-select class="w160" placeholder="请选择" v-model="item.applyUserId" filterable @change="itemselectChange($event, item)">
													<el-option v-for="v in item.memberOption" :key="v.id" :value="v.id" :label="v.name"></el-option>
												</el-select>
											</el-form-item>
										</el-col>
										<i class="error_f el-icon-delete pointer f20 delete" @click="delItem(form, i)" v-if="i > 0"></i>
									</el-row>
								</div>
								<el-row>
									<el-col :span="12">
										<el-form-item label="编制部门:" class="">
											<el-input class="w160" v-model="userInfo.deptName" placeholder="数据带入" readonly></el-input>
										</el-form-item>
									</el-col>
								</el-row>
							</el-form>
						</div>
						<div style="margin-bottom: 10px;"><creat-file :form="form"></creat-file></div>
					</basic-container>
				</div>
			</el-col>
			<el-col :span="6" style="margin-top:10px;"><creat-flow ref="creatFlow" :formList="formList"></creat-flow></el-col>
		</el-row>
		<steps ref="steps" @close="success()" :nowdate="nowdate"></steps>
		<confirm
			ref="confirm"
			@close="save()"
			type="1"
			:guifanFilesProcessRecordList="guifanFilesProcessRecordList"
			:systemGuifanFilesProcessList="systemGuifanFilesProcessList"
		></confirm>
		<showhistory ref="showhistory" type="1" :guifanFilesProcessRecordList="guifanFilesProcessRecordList"></showhistory>
	</detailbox>
</template>

<script>
import confirm from './confirm.vue';
import {validateFun} from '@/api/async-validator/wenjianzuofei'
import { savefiles, getguifanDetail, update, fafangwenjianList, fafangwenjianVersionList, getguifanList } from '@/api/myapi/tixiwenjian';
export default {
	props: {
		detailId: '',
		type: {
			type: [Number, String],
			default: 0
		}
	},
	components: {
		confirm
	},
	data() {
		return {
			system: 'voidfilesprocess',
			checked: false,
			showpreview: false,
			tableData: [],
			filNameList: [],
			versonList: [],
			useTemp: false,
			formList: [
				{
					numberType: 0,
					jiluFileList: [],
					guifanFileList: [],
					memberOption: [],
					voidList: [{}]
				}
			],
			guifanFilesProcessRecordList: [],
			systemGuifanFilesProcessList: []
		};
	},
	created() {
		if (this.detailId) {
			this.getDetail();
		} else {
			this.findTypeByProcessType();
			if (sessionStorage.getItem('delItem')) {
				let delItem = JSON.parse(sessionStorage.getItem('delItem'));
				delItem.filesId = delItem.id;
				this.formList[0].voidList = [delItem];
			}
		}
		this.fafangwenjianList();
		this.getdeptlist();
	},
	methods: {
		addItem(form) {
			form.voidList.push({});
		},
		delItem(form, i) {
			form.voidList.splice(i, 1);
		},
		getDetail() {
			getguifanDetail(
				{
					id: this.detailId
				},
				this.system
			).then(({ data }) => {
				console.log(data);
				if (data.success) {
					this.formList = [data.data];
					this.guifanFilesProcessRecordList = data.data.processRecordList;
					this.checkItem = this.guifanFilesProcessRecordList.find(item => item.checkStatus == 2);
					this.$nextTick(() => {
						this.formList.forEach(el => {
							el.voidList.forEach(item => {
								this.getuserByDept(item.applyDeptId, item);
								this.fafangwenjianVersionList(item.id, item);
							});
						});
						this.$refs.creatFlow.setProcessRecord(this.guifanFilesProcessRecordList);
					});
				}
			});
		},
		changeFileName(id, item) {
			let fileItem = this.filNameList.find(e => e.id == id);
			item.fileNumber = fileItem.fileNumber;
			item.name = fileItem.name;
			this.$set(item, 'versionNumber', '');
			this.fafangwenjianVersionList(id, item);
		},
		close() {
			if (sessionStorage.getItem('delItem')) {
				sessionStorage.removeItem('delItem');
				window.history.go(-1);
			} else {
				this.$emit('close');
			}
		},
		//  版本号
		fafangwenjianVersionList(id, form) {
			fafangwenjianVersionList({ fileId: id }).then(({ data }) => {
				if (data.code == 200) {
					this.$set(form, 'versonList', data.data);
				}
			});
		},
		//   所有文件
		fafangwenjianList() {
			fafangwenjianList({ type: 1 }).then(({ data }) => {
				console.log(data);
				if (data.code == 200) {
					this.filNameList = data.data;
					this.$forceUpdate();
				}
			});
		},
		itemselectChange(id, item) {
			let userItem = item.memberOption.find(e => e.id == id);
			item.applyUserName = userItem.name;
			item.applyUserId = userItem.id;
			this.$forceUpdate();
		},
		getMemberOption(val, item, index, i) {
			let dept = eval('this.$refs.newdept' + (index + i))[0].getCheckedNodes()[0];
			console.log(dept);
			item.applyDeptName = dept.data.deptName;
			item.applyDeptId = dept.data.id;
			item.applyUserId = '';
			item.applyUserName = '';
			this.getuserByDept(val, item);
		},
		async submit() {
			let systemGuifanFilesProcessList = [];
			let guifanFilesProcessRecordList = this.$refs.creatFlow.guifanFilesProcessRecordList;
			let isOnlineReview = this.$refs.creatFlow.isOnlineReview;
			const flag = await this.$refs.creatFlow.beforeSubmit();
			if (!flag) return;
			validateFun(this.formList,()=>{
				for (let i = 0; i < this.formList.length; i++) {
					let item = this.formList[i];
					item.createDeptName = this.userInfo.deptName;
					item.createUserName = this.userInfo.user_name;
					item.createUserId = this.userInfo.user_id;
					item.createDeptId = this.userInfo.dept_id;
					systemGuifanFilesProcessList.push({
						...item,
						issueFilesProcessRecordList: guifanFilesProcessRecordList,
						isUpgrade: 0,
						isOnlineReview: isOnlineReview ? 1 : 0,
						isDeleted: 0,
						isEncryption: 0
					});
				}
				this.systemGuifanFilesProcessList = systemGuifanFilesProcessList;
				this.guifanFilesProcessRecordList = guifanFilesProcessRecordList;
				this.openDialg('confirm');
			});
		},
		// 保存
		save() {
			if (this.type == 1) {
				update(this.systemGuifanFilesProcessList, this.system).then(({ data }) => {
					if (data.success) {
						this.$message.success('提交成功');
						this.openDialg('steps');
					}
				});
			} else {
				savefiles(this.systemGuifanFilesProcessList, this.system).then(({ data }) => {
					if (data.success) {
						this.$message.success('提交成功');
						this.openDialg('steps');
					}
				});
			}
		},
		// 发放的文件
		addFile() {
			this.formList.push({
				numberType: this.numberType,
				number: this.numberType == 0 ? this.findTypeByProcessType(this.liushuihao) : '',
				jiluFileList: [],
				guifanFileList: [],
				memberOption: [],
				voidList: [{}]
			});
			let index = this.formList.length - 1;
			setTimeout(() => {
				let document = window.parent.document.getElementById(`item${index}`);
				document.scrollIntoView({ behavior: 'smooth' });
			}, 100);
		},
		success() {
			this.$emit('success');
		}
	}
};
</script>

<style scoped="scoped" lang="scss">
.delete {
	position: absolute;
	top: 10px;
	right: 10px;
}
.error {
	background-color: #fceeec;
	border: 1px solid #f9dcd9;
	padding: 6px 10px;
	border-radius: 2px;
}

.reviewList {
	background: #ffffff;
	border: 1px dashed #e4e8ed;
	padding: 15px;
	position: relative;
}
</style>
